<script>
    import Detail from "../../atom/Detail.svelte";
    import Button from "../../atom/Button.svelte";
    import Card from "../../atom/Card.svelte";
    import {goto} from "$app/navigation";
    import CardContent from "./CardContent.svelte";
    import {eventEmitter} from "../../eventEmitter.js";

    let event_emitter = eventEmitter
    let self;
</script>

<svelte:component this="{self}" />

<div class="home">
    <div class="title">
        <h2>家园</h2>
        这里是幻想乡，在这里休息休息吧~
    </div>

    <div class="detail-item">
        <Detail title="异变降临" info="去看看传的热闹的异变是怎么回事吧" />
        <div class="action">
            <Button>前往</Button>
        </div>
    </div>

    <div class="detail-item">
        <Detail title="酒馆" info="这地方似乎有什么重要的人来过" />
        <div class="action">
            <Button>前往</Button>
        </div>
    </div>

    <div class="detail-item">
        <Detail title="逐乐园" info="也许这是个不错的压力释放地点" />
        <div class="action">
            <Button>前往</Button>
        </div>
    </div>

    <div class="detail-item">
        <Detail title="卡组" info="可以在这里设置卡组" />
        <div class="action">
            <Button callback={()=>{
                event_emitter.emit("component_update", CardContent);
            }}>前往</Button>

        </div>
    </div>

</div>


<style lang="less">
    .home{
      text-align: left;
      width: 100%;
    }

    .title{
      display: flex;
      gap: 10px;
      flex-direction: column;
      color: white;
      h2{
        font-size: 20px;
        font-weight: bold;
        color: #ffd700;
      }
    }
    .action{
      margin-left: auto;
      margin-top: 10px;
    }
    .detail-item{
      // 每个子元素的宽度是一样的
      height: fit-content;
      margin: 20px 0;
      gap: 5px;
      display: grid;
      align-items: center;
    }
</style>